require(['./config'], () => {
    require(['swiper', 'template', 'header', 'footer', 'leader'], (Swiper, template) => {
        class Index {
            constructor() {
                    this.getData().then(() => {
                        this.swiper()
                        this.imgHover()
                    })
                }
                // 使用官网数据渲染页面，但因为其他页面的数据获取不到数据，所以会进行第二次数据获取
            getData() {
                    return new Promise((resolve, reject) => {
                        $.ajax({
                            type: "post",
                            url: "/antacom/data.Webpage/onlinePc",
                            data: "id=a",
                            dataType: "json",
                            success: function(resp) {
                                for (let i = 0; i < resp.data.length; i++) {
                                    let html = template('contain-img-template', resp.data[i])
                                    document.querySelector('.main-contain-add').innerHTML += html
                                    if (i == 2) {
                                        let html = template('hoverbox-template', resp.data[i])
                                        document.querySelector(' .hoverup .contain-banner').innerHTML += html
                                    }
                                    if (i == 7) {
                                        let html = template('swiper-template', resp.data[i])
                                        document.querySelector('.swiperGoods').innerHTML += html
                                    }
                                }
                                var obj = resp.data[2].person;
                                let html2 = template("hoverbox2-template", {
                                    list: obj
                                })
                                $(".hover-list").html(html2);
                                var obj2 = resp.data[7].goodsList;
                                let html3 = template("swiper-one-content-template", {
                                    list: obj2
                                })
                                $(".swiper-wrapper").html(html3);
                                // 获取第二次数据渲染
                                $.ajax({
                                    type: "get",
                                    url: "/api/tab/2",
                                    data: "start = 0 ",
                                    dataType: "json",
                                    success: function(resp2) {}
                                })
                                resolve();
                            }
                        })
                    })
                }
                // 轮播图
            swiper() {
                    var mySwiper = new Swiper('.swiper-container', {
                        loop: true, // 循环模式选项
                        slidesPerView: 4,
                        spaceBetween: 20,
                        disableOnInteraction: false,
                        autoplay: {
                            autoplay: true
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        // 如果需要滚动条
                        scrollbar: {
                            el: '.swiper-scrollbar',
                        },
                    });
                    // 设置轮播图的滚动条样式
                    mySwiper.scrollbar.$dragEl.css('background', '#666666');
                    mySwiper.scrollbar.$el.css('height', '6px');
                    mySwiper.scrollbar.$el.css('top', '500px');
                    mySwiper.scrollbar.$el.css('z-index', '999');
                }
                // 图片划入划出效果
            imgHover() {
                $(".hover-list a").on("mouseenter", function() {
                    $(this).children(".hover-body").css("display", "block");
                });
                $(".hover-list a").on("mouseleave", function() {
                    $(this).children(".hover-body").css("display", "none");
                });


            }
        }
        return new Index();
    })
})